<script setup>
// No reactive state needed for this component
</script>

<template>
  <div class="container mx-auto p-8">
    <h1 class="mb-6 text-2xl font-bold">Link Component</h1>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Basic Link</h3>
        <div class="flex flex-col space-y-4">
          <div class="mb-4">
            <p class="mb-2">Default Link</p>
            <Link href="https://example.com" target="_blank">
              Visit Example Website
            </Link>
          </div>

          <div class="mb-4">
            <p class="mb-2">Link with Subtle Appearance</p>
            <Link
              href="https://example.com"
              appearance="subtle"
              target="_blank"
            >
              Subtle Link Style
            </Link>
          </div>

          <div class="mb-4">
            <p class="mb-2">Inline Link in text</p>
            <p>
              This is a paragraph with an
              <Link href="https://example.com" inline target="_blank">
                inline link
              </Link>
              in the middle of text.
            </p>
          </div>
        </div>
      </div>

      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Link with Slots</h3>
        <div class="flex flex-col space-y-4">
          <div class="mb-4">
            <p class="mb-2">Link with Start and End Slots</p>
            <Link href="https://example.com" target="_blank">
              <template #start>
                <span style="margin-right: 5px">🔗</span>
              </template>
              Link with Icon
              <template #end>
                <span style="margin-left: 5px">➡️</span>
              </template>
            </Link>
          </div>

          <div class="mb-4">
            <p class="mb-2">Download Link</p>
            <Link
              href="https://example.com/sample.pdf"
              download="sample.pdf"
              target="_blank"
            >
              <template #start>
                <span style="margin-right: 5px">📥</span>
              </template>
              Download Sample PDF
            </Link>
          </div>

          <div class="mb-4">
            <p class="mb-2">Link with Events</p>
            <Link
              href="#"
              @click="
                (e) => {
                  e.preventDefault();
                  console.log('Link clicked!');
                  alert('Link clicked!');
                }
              "
            >
              Click me (check console)
            </Link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
